// web/src/app/learn/(course)/courses/[courseId]/chapters/[chapterId]/page.tsx

import {currentUser} from "@/lib/auth";
import {redirect} from "next/navigation";
import {getChapter} from "@/actions/learn/get-chapter";
import Banner from "@/components/learn/banner";
import VideoPlayer from "@/app/learn/(course)/courses/[courseId]/chapters/[chapterId]/_components/video-player";
import CourseEnrollButton from "./_components/course-enroll-button";
import {Separator} from "@/components/ui/separator";
import Preview from "@/components/learn/preview";
import {File} from 'lucide-react'
import CourseProgressButton
    from "@/app/learn/(course)/courses/[courseId]/chapters/[chapterId]/_components/course-progress-button";

const Page = async ({params}: { params: { courseId: string; chapterId: string } }) => {
    const user = await currentUser()
    if (!user) return redirect(`/learn`)

    const {
        chapter,
        nextChapter,
        muxData,
        attachments,
        userProgress,
        purchase,
        course
    } = await getChapter({
        userId: user.id!,
        chapterId: params.chapterId,
        courseId: params.courseId,
    })

    if (!chapter || !course) return redirect('/learn')

    const isLocked = !chapter.isFree && !purchase
    const completeOnEnd = !!purchase && !userProgress?.isCompleted

    return (
        <div>
            {userProgress?.isCompleted && (
                <Banner
                    variant={'success'}
                    label={`You already completed this chapter.`}
                />
            )}
            {isLocked && (
                <Banner
                    variant={'warning'}
                    label={`You need to purchase this course to watch this chapter.`}
                />
            )}
            <div className={`flex flex-col max-w-4xl mx-auto pb-20`}>
                <div className={`p-4`}>
                    <VideoPlayer
                        chapterId={params.chapterId}
                        title={chapter.title}
                        courseId={params.courseId}
                        nextChapterId={nextChapter?.id!}
                        // 如果用next-video sync很麻烦
                        // playbackId={muxData?.playbackId!}
                        videoUrl={chapter.videoUrl!}
                        isLocked={isLocked}
                        completeOnEnd={completeOnEnd}
                    />
                </div>
                <div>
                    <div className={`p-4 flex flex-col md:flex-row items-center justify-between`}>
                        <h2 className={`text-2xl font-semibold mb-2`}>
                            {chapter.title}
                        </h2>
                        {purchase ? (
                            <CourseProgressButton
                                chapterId={params.chapterId}
                                courseId={params.courseId}
                                nextChapterId={nextChapter?.id}
                                isCompleted={!!userProgress?.isCompleted}
                            />
                        ) : (
                            <CourseEnrollButton
                                courseId={params.courseId}
                                price={course.price!}
                            />
                        )}
                    </div>
                    <Separator/>
                    <div>
                        <Preview value={chapter.description!}/>
                    </div>
                    {!!attachments.length && (
                        // 用户购买后才能获取附件
                        <>
                            <Separator/>
                            <div className={`p-4`}>
                                {attachments.map(attachment => (
                                    <a href={attachment.url}
                                       target={'_blank'}
                                       key={attachment.id}
                                       className={`flex items-center p-3 w-full bg-sky-200 border
                                       text-sky-700 rounded-md hover:underline`}
                                    >
                                        <File/>
                                        <p className={`line-clamp-1`}>
                                            {attachment.name}
                                        </p>
                                    </a>
                                ))}
                            </div>
                        </>
                    )}
                </div>
            </div>
        </div>
    )
};

export default Page;